layui.define(['jquery', 'util'], function (exports) {

    var $ = layui.$
    var util = layui.util

    var theme = {
        render: function () {
            var html = ""
            var themeIndex = layui.data("theme", { key: "color" })
            $.each(theme.color, function (k, v) {
                var then = "";
                if (themeIndex == k) {
                    then = "layui-this"
                }
                html += `
                <li class="${then}" theme-event="setTheme" data-index="${k}" title="${v.title}">
                    <div class="admin-setTheme-header" style="background-color: ${v.topBgColor};"></div>
                    <div class="admin-setTheme-side" style="background-color: ${v.menuBgColor};">
                        <div class="admin-setTheme-logo" style="background-color: ${v.logoBgColor};"></div> 
                    </div> 
                </li>`
            })
            return `<ul class="admin-setTheme-color">${html}</ul>`
        },
        click: function () {
            var themeIndex = layui.data("theme", { key: "color" })
            if (typeof themeIndex === "undefined") {
                layui.data("theme", { key: "color", value: 0 })
                theme.fun(theme.color[0])
                $(".admin-setTheme-color li:eq(0)").addClass("layui-this")
            } else {
                theme.fun(theme.color[themeIndex])
            }

            util.event("theme-event", {
                setTheme: function () {
                    var index = $(this).index()
                    layui.data("theme", { key: "color", value: index })
                    var data = theme.color[index]
                    theme.fun(data)
                    $(`.admin-setTheme-color li`).removeClass("layui-this")
                    $(`.admin-setTheme-color li:eq(${index})`).addClass("layui-this")
                }
            })
        },
        color: [
            {
                title: "黑白色",
                logoBgColor: "#20222A",
                logoTextColor: "rgba(255,255,255,.8)",
                menuBgColor: "#20222A",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#009688",
                topBgColor: "#fff",
                topTextColor: "#333",
                topThisColor: "#20222A",
                tabThisColor: "#20222A"
            },
            {
                title: "灰黑色",
                logoBgColor: "#2f363c",
                logoTextColor: "#fff",
                menuBgColor: "#2f363c",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#16baaa",
                topBgColor: "#23292e",
                topTextColor: "rgba(255,255,255,.7)",
                topThisColor: "#16b777",
                tabThisColor: "#16b777"
            },
            {
                title: "经典黑",
                logoBgColor: "#3A3D49",
                logoTextColor: "#fff",
                menuBgColor: "#24262F",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#009688",
                topBgColor: "#fff",
                topTextColor: "#333",
                topThisColor: "#3A3D49",
                tabThisColor: "#3A3D49"
            },
            {
                title: "咖啡色",
                logoBgColor: "#2E241B",
                logoTextColor: "#fff",
                menuBgColor: "#2E241B",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#A48566",
                topBgColor: "#fff",
                topTextColor: "#333",
                topThisColor: "#2E241B",
                tabThisColor: "#A48566"
            },
            {
                title: "海蓝色",
                logoBgColor: "#1E9FFF",
                logoTextColor: "#fff",
                menuBgColor: "#344058",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#1E9FFF",
                topBgColor: "#fff",
                topTextColor: "#333",
                topThisColor: "#1E9FFF",
                tabThisColor: "#1E9FFF"
            },
            {
                title: "海蓝色",
                logoBgColor: "#1E9FFF",
                logoTextColor: "#fff",
                menuBgColor: "#344058",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#1E9FFF",
                topBgColor: "#1E9FFF",
                topTextColor: "#f8f8f8",
                topThisColor: "#344058",
                tabThisColor: "#1E9FFF"
            },
            {
                title: "草绿色",
                logoBgColor: "#2F9688",
                logoTextColor: "rgba(255,255,255,.7)",
                menuBgColor: "#3A3D49",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#5FB878",
                topBgColor: "#fff",
                topTextColor: "#333",
                topThisColor: "#5FB878",
                tabThisColor: "#5FB878"
            },
            {
                title: "深绿色",
                logoBgColor: "#226A62",
                logoTextColor: "rgba(255,255,255,.7)",
                menuBgColor: "#20222A",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#009688",
                topBgColor: "#2F9688",
                topTextColor: "#fff",
                topThisColor: "rgba(255,255,255,.5)",
                tabThisColor: "#226A62"
            },
            {
                title: "深绿色",
                logoBgColor: "#2F9688",
                logoTextColor: "rgba(255,255,255,.7)",
                menuBgColor: "#20222A",
                menuTextColor: "rgba(255,255,255,.7)",
                menuThisColor: "#009688",
                topBgColor: "#2F9688",
                topTextColor: "#fff",
                topThisColor: "rgba(255,255,255,.5)",
                tabThisColor: "#226A62"
            }
        ],
        fun: function (data) {
            $(".theme").html(`
            /* logo */
            .layui-layout-admin .layui-logo{
                background-color:${data.logoBgColor}!important; /* 背景色 */
                color:${data.logoTextColor}!important; /* 背景色 */
            }
            /* 菜单 */
            .layui-layout-admin .layui-side{
                background-color:${data.menuBgColor}!important;
            }
            .layui-layout-admin .layui-side .layui-nav-tree{
                background-color:${data.menuBgColor}!important;
            }
            .layui-layout-admin .layui-side .layui-nav-tree .layui-nav-bar{
                background-color:${data.menuBgColor}!important;
            }
            /* 头部 */
            .layui-layout-admin .layui-side .layui-nav-tree .layui-this,
            .layui-layout-admin .layui-side .layui-nav-tree .layui-this>a,
            .layui-layout-admin .layui-side .layui-nav-tree .layui-this>a:hover{
                background-color:${data.menuThisColor}!important;
            }
            .layui-layout-admin .layui-header{
                background-color:${data.topBgColor}!important;
            }
            .layui-layout-admin .layui-header .layui-nav-item a{
                color:${data.topTextColor}!important;
            }
            .layui-layout-admin .layui-header .layui-nav .layui-nav-bar{
                background-color:${data.topThisColor}!important;
            }
            /* 标签 */
            .admin-body .layui-tab-title .layui-this:after{
                background-color:${data.tabThisColor}!important;
            }`)
        }
    }

    exports('theme', theme); // 输出模块
}); 